<template>
  <div class="myVideo">
    <div style="margin-bottom: 15px">
      <strong>我的视频</strong>
    </div>
    <div class="myVideo-body">
      <el-row>
        <el-col :span="6" v-for="item in myVideoList" :key="item.id">
          <el-card class="partCard"  shadow="hover" :body-style="{ padding: '0px' }" @click.native="toVideo(item.id)">
            <el-image
              :src="item.image"
              class="el-image"
              
            ></el-image>
            <div class="title">
              <a>{{ item.title }}</a>
            </div>
            <div style="font-size:12px;margin-top: 10px">
              <a>{{ item.date }}</a>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- <el-row>
        <el-col
          :span="5"
          v-for="item in myVideoList"
          :key="item.id"
          class="collect-video"
        >
          <el-image
            :src="item.image"
            class="el-image"
            @click.native="toVideo(item.id)"
          ></el-image>
          <div class="title">
            <a>{{ item.title }}</a>
          </div>
          <div class="time">
            <a>{{ item.date }}</a>
          </div>
        </el-col>
      </el-row> -->
    </div>
  </div>
</template>

<script>
import { getVideoList } from "@/api/videoApi";
export default {
  data() {
    return {
      id: sessionStorage.getItem("id"),
      myVideoList: [],
    };
  },

  methods: {
    //获取我的视频列表
    getVideoList() {
      getVideoList(this.id)
        .then((res) => {
          this.myVideoList = res.data.data;
          //没有使用vuex ，用本地存储共享数据
          sessionStorage.setItem("myVideoListNumber", this.myVideoList.length);
        })
        .catch((error) => {
          console.log(error);
        });
    },

    toVideo(id) {
      this.$router.push({
        name: "video",
        query: {
          id: id,
        },
      });
    },
  },

  mounted() {
    this.getVideoList();
  },
};
</script>

<style >
.myVideo {
  width: 1200px;
  margin: 0 auto;
  padding: 14px;
}

.myVideo-body .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myVideo-body .el-image {
  width: 250px;
  height: 150px;
}

.myVideo-body .partCard {
  width: 250px;
  height: 230px;
}

.myVideo-body .title a:hover{
 color: #00a1d6;
 cursor: pointer;
}
</style>
